<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>多个 Ajax 请求的并发执行</title>
  <style>
    /* css reset */
    * {
      padding: 0;
      margin: 0;
    }

    li {
      list-style: none;
    }

    /* menu */
    .menu {
      width: 100px;
      background-color: rgba(0, 0, 0, 0.1);
      margin: 10px;
    }

    .menu-item {
      position: relative;
      padding: 5px;
      cursor: pointer;
    }

    .menu-content {
      display: none;
      position: absolute;
      left: 100%;
      top: 0;
      width: 200px;
      height: 100px;
      padding: 0 5px;
      background-color: rgba(0, 0, 0, 0.1);
    }

    .menu-item:hover {
      background-color: rgba(0, 0, 0, 0.4);
    }

    .menu-item:hover .menu-content {
      display: block;
    }

    .menu-loading {
      margin: 45px 0 0 92px;
    }

    /* loading-page */
    .loading-page {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1000;
      background-color: #eee;
      text-align: center;
    }

    .loading-img {
      position: absolute;
      top: 50%;
    }

    .ad img {
      display: inline-block;
      width: 25%;
    }

    .none {
      display: none;
    }
  </style>
</head>

<body>
  <div id="loading-page" class="loading-page">
    <img class="loading-img" src="./loading.gif" alt="加载中" />
  </div>

  <div id="ad" class="ad"></div>

  <ul id="menu" class="menu">
    <!-- <li class="menu-item" data-key="hot" data-done="done">
        <span>热门</span>
        <div class="menu-content">
          <p><img class="menu-loading" src="./loading.gif" alt="加载中" /></p>
        </div>
      </li> -->
  </ul>
  <script type="module">
    import { getJSON } from '../ajax/index.js';

    const menuURL = 'https://www.imooc.com/api/mall-PC/index/menu';
    const adURL = 'https://www.imooc.com/api/mall-PC/index/ad';

    const loadingPageEl = document.getElementById('loading-page');
    const adEl = document.getElementById('ad');
    const menuEl = document.getElementById('menu');

    const p1 = getJSON(menuURL)
      .then(repsonse => {
        // console.log(repsonse);

        let html = '';

        for (const item of repsonse.data) {
          html += `
              <li class="menu-item" data-key="${item.key}">
                <span>${item.title}</span>
                <div class="menu-content">
                  <p><img class="menu-loading" src="./loading.gif" alt="加载中" /></p>
                </div>
              </li>
            `;
        }

        menuEl.innerHTML = html;

        // [{key: "hot", title: "热门出发地", subTitles: Array(5)}]

        // ...
      })
      .then(() => {
        const items = menuEl.querySelectorAll('.menu-item');

        for (const item of items) {
          item.addEventListener(
            'mouseenter',
            () => {
              // console.log(item.getAttribute('data-key'));

              // IE11 开始支持
              // console.log(item.dataset.key);

              if (item.dataset.done === 'done') return;

              getJSON(
                `https://www.imooc.com/api/mall-PC/index/menu/${item.dataset.key}`
              )
                .then(repsonse => {
                  // console.log(repsonse);

                  // [{title: "内地热门城市", cities: Array(27)}]

                  item.dataset.done = 'done';

                  let html = '';

                  for (const item of repsonse.data) {
                    html += `<p>${item.title}</p>`;
                  }

                  item.querySelector('.menu-content').innerHTML = html;
                })
                .catch(err => {
                  console.log(err);
                });
            },
            false
          );
        }
      })
      .catch(err => {
        console.log(err);
      });

    const p2 = getJSON(adURL)
      .then(response => {
        // console.log(response);
        // [{ url: 'http://alimc.img.imooc.com/class/' }];

        let html = '';
        for (const item of response.data) {
          html += `<img src="${item.url}" alt="" />`;
        }
        adEl.innerHTML = html;
      })
      .catch(err => {
        console.log(err);
      });

    Promise.all([p1, p2]).then(() => {
      // loadingPageEl.style.display = 'none';

      // IE10 开始支持
      loadingPageEl.classList.add('none');
      // loadingPageEl.classList.remove('none');
    });
  </script>
</body>

</html>